<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			.test{
				width: 20rem;
				height: 10rem;
				background-color: palegreen;
				text-align: center;
			}
			.hellow{
				color: palevioletred;
				font-size: 1rem;
			}
		</style>
	</head>
	<body>
		<div class="test">
			<div class="hellow">
				this is rem veiport
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
    //4优化 添加监听事件儿，让它自动监听窗口变化动态改变 		
	function getHtmlFontSize(){

		//适配3步 
		//1 获取html的宽 
			let htmlWindth = document.documentElement.clientWidth || document.body.clientWidth; 	
			console.log("width-------",htmlWindth) //980px 
		//有些浏览器获取不到documentElement则 取 || document.body.clientWidth
		//2 htmlDom
			let htmlDom =document.getElementsByTagName("html")[0]
			console.log(htmlDom)  //dom流  
		//3 设置根元素的样式
			htmlDom.style.fontSize = htmlWindth/20+"px"; //这个20是等分的意思 这样每一份是16px 即1rem = 16px 
													 //点击不同的设备后都可以适配 (刷新)
	}
	//调用一次 
	getHtmlFontSize();
	window.addEventListener("resize",getHtmlFontSize)
//方法1 
		/*
			function rem(){
			document.documentElement.style.fontSize=document.documentElement.clientWidth/8+"px"
		}
		rem()
		window.onresize=rem;
		*/
// 方法2 
	/*
	window.onload = function() {   
	    document.documentElement.style.fontSize=document.documentElement.clientWidth/40+'px';        
	   window.onresize = function() {            
	       document.documentElement.style.fontSize=document.documentElement.clientWidth/40+'px';       
	   };
	}; 
	*/
	let a = 10;
	console.log(a)
	setTimeout(()=>{
		console.log(a)
	})
	a = 11;
	console.log(a)


</script>
